<template>
	<view class="web-login"></view>
</template>

<script>
	import {
		official_appid,
		official_appsecret,
	} from '@/config/index.js'
	import {
		loginApi
	} from '@/api/login.js'
	import {
		getCode
	} from '@/scripts/compatible/weixinCode.js'
	import {
		navigateBack
	} from '@/scripts/compatible/pageOptions.js'

	export default {
		mounted() {
			console.log("web-login");
			this.$emit('setLoading', true)
			this.getWxCode()
		},
		methods: {
			async getWxCode() {

				// 1.获取code				
				const code = getCode()
				if (!code) return
				await uni.setStorageSync("code", code)

				// 2.请求
				const res = await loginApi()
				uni.showToast({
					icon: res ? 'success' : 'error',
					title: res ? (res.data.msg || '登录成功') : '请求失败',
					complete: () => {
						this.$emit('setLoading', true)
						if (res) {
							uni.setStorageSync('userInfo', res.data.data)
							uni.setStorageSync('token', res.data.data.Token.user_token)
							navigateBack()
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			handleCencel() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.web-login {
		.avatar {
			height: 72px;
			width: 72px;
			border-radius: 50%;
			margin: 120px auto 0;
			background-color: #f4f4f6;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.userName {
			font-size: 20px;
			text-align: center;
			margin-top: 10px;
		}

		.text {
			direction: rtl;
			padding: 30rpx;
			color: #999;
		}

		.login {
			padding: 24px 15px;
			display: flex;
			justify-content: center;
			font-size: 16px;
			flex-direction: row-reverse;

			.confirm {
				height: 46px;
				border-radius: 23px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: linear-gradient(90deg, #2f71ff, #15aaff);
				color: #fff;
				width: 140px;
				margin-left: 30px;
			}

			.cencel {
				height: 46px;
				color: #777;
				background-color: #f8f8f8;
				border-radius: 23px;
				width: 120px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>